<template>
  <view class="main">
    <view v-if="JSON.stringify(userInfo) != '{}' && userInfo.status == 0 && userInfo.blockDays == 0" >
      <view class="user dispaly-center" @click="$goUrl(`/subPackage/mine/userInfo`)">
        <view class="user-avatar">
<!--          <image class="avatar-bg" src="/static/mine/tx.png" mode="aspectFill"/>-->
          <image class="avatar"
                 :src="userInfo.avatar"
                 mode="aspectFill"/>
        </view>
        <view class="dispaly-just-between not">
          <view class="name">{{ userInfo.nickName }}</view>
          <view class="notice" @click.stop="$goUrl(`/subPackage/mine/notice`)">
            <up-icon name="bell" color="#ffffff" size="25"></up-icon>
            <view class="num" v-if="userInfo?.msgNum != 0">{{userInfo?.msgNum || 0}}</view>
          </view>
        </view>
      </view> 
      <view class="money">
        <image class="one-bg" src="/static/mine/one-block.png" mode="aspectFill"/>
        <view class="money-box dispaly-just-between">
          <view class="m-left">
            <view class="title">( 账户余额 )</view>
            <view class="money">￥{{ userInfo?.balance || 0 }}</view>
          </view>
          <view class="m-right dispaly-align-center" @click="$goUrl(`/subPackage/mine/withdrawal`)">
            <view class="submit-box dispaly-align-center">
              <view class="dispaly-align-center submit-content" >
                <image src="/static/pop/seven.png" mode="aspectFill"/>
                <view class="submit">提现</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="JSON.stringify(userInfo) == '{}'" class="login" @click="$goUrl('/subPackage/mine/login')">点击登录</view>
    <view v-if="JSON.stringify(userInfo) != '{}' && userInfo.status == 2 " class="login" >账号待审核</view>
    <view v-if="JSON.stringify(userInfo) != '{}' && userInfo.blockDays != 0" class="login" >您已被拉黑</view>
    <view v-if="JSON.stringify(userInfo) != '{}' && !userInfo.phonenumber" class="login" @click="$goUrl(`/subPackage/mine/register`)">未注册</view>

    <view class="option">
      <image class="two-bg" src="/static/mine/two-block.png" mode="aspectFill"/>
      <view class="option-box">
        <view class="option-title">( 我的服务 )</view>
        <button :open-type="item.type == 7 ? 'contact':''" class="option-item dispaly-just-between" v-for="(item, index) in MINE_OPTION" :key="index"
              @click="clickItemSkip(item)">
          <view class="left">
            <image :src="item.icon" mode="aspectFill"/>
          </view>
          <!--          :style="{borderBottom: item.type == 7 ? 'none' : ''}"-->
          <view class="right dispaly-just-between">
            <view class="name">{{ item.name }}</view>
            <view class="row-right">
              <image class="one-bg" src="/static/mine/right.png" mode="aspectFill"/>
            </view>
          </view>
        </button>
      </view>
    </view>
  </view>
  <TabBar current-path="/pages/mine/mine"/>
</template>

<script setup>
import {MINE_OPTION} from '@/config/base'
import {ref} from "vue";
import {getUserInfo} from '@/api/apiList';
import {onShow} from "@dcloudio/uni-app";

const userInfo = ref({})
const getUserData = async () => {
  const res = await getUserInfo()
  if (res.code == 200) {
    userInfo.value = res.data
  }
}

onShow(() => {
  if(uni.getStorageSync("token")) {
    getUserData()
  }
})

const clickItemSkip = (item) => {
  if(JSON.stringify(userInfo.value) == '{}') {
    uni.showToast({
      title: '未登录',
      icon: 'none'
    })
    return
  }
  if(userInfo.value.status == 2) {
    uni.showToast({
      title: '账号待审核',
      icon: 'none'
    })
    return
  }
  if(userInfo.value.blockDays != 0) {
    uni.showToast({
      title: '您已被拉黑',
      icon: 'none'
    })
    return
  }
  if(!userInfo.value.phonenumber) {
    uni.showToast({
      title: '未注册',
      icon: 'none'
    })
    return
  }
  if (item.path) {
    uni.navigateTo({
      url: item.path
    })
  }
}
</script>

<style lang="scss" scoped>
.main {

  padding: 30rpx;
  margin-top: 70rpx;
  .login {
    font-size: 42rpx;
    font-weight: 900;
    margin: 50rpx 0;
  }
  .user {
    .not {
      .notice {
        position: relative;
        .num {
          width: 30rpx;
          height: 30rpx;
          background-color: red;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: -5rpx;
          right: -5rpx;
          font-size: 20rpx;
          border-radius: 50%;
        }
      }
    }
    .user-avatar {
      width: 128rpx;
      height: 128rpx;
      position: relative;

      .avatar-bg {
        width: 128rpx;
        height: 128rpx;
      }

      .avatar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
      }
    }

    .name {
      margin-left: 40rpx;
      font-size: 35rpx;
      margin-right: 50rpx;
    }
  }

  .option {
    position: relative;

    .two-bg {
      width: 692rpx;
      height: 902rpx;
    }

    .option-box {
      box-sizing: border-box;
      padding: 30rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 692rpx;
      height: 902rpx;

      .option-title {
        font-size: 40rpx;
      }

      .option-item:last-child {
        margin-bottom: 0;
      }

      .option-item {
        padding: 25rpx 0;

        .left {
          flex: 0.5;
          margin-right: 20rpx;
          image {
            width: 50rpx;
            height: 50rpx;
          }
        }

        .right {
          flex: 4;
          border-bottom: 1rpx solid #e6bd4e;
          box-sizing: border-box;
          padding-bottom: 20rpx;

          .name {
            color: #222;
          }

          .row-right {
            image {
              width: 14rpx;
              height: 22rpx;
            }
          }
        }
      }
    }
  }

  .money {
    margin: 20rpx 0 20rpx 0;
    position: relative;

    .one-bg {
      width: 692rpx;
      height: 210rpx;
    }

    .money-box {
      box-sizing: border-box;
      padding: 30rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 692rpx;
      height: 210rpx;

      .m-left {
        .title {
          font-size: 40rpx;
        }

        .money {
          font-size: 45rpx;
          font-weight: 900;
        }
      }

      .m-right {
        //border: 6rpx solid #000000;
        //width: 180rpx;
        //height: 70rpx;
        //background-color: #805e09;
        //color: #fff;
        .submit-box {
          width: 100%;

          .submit-content {
            width: 146rpx;
            height: 86rpx;
            position: relative;

            image {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              width: 146rpx;
              height: 86rpx;
            }

            .submit {
              font-family: IPix;
              font-size: 30rpx;
              color: #FFFFFF;
              position: absolute;
              transform: (-50%, -50%)
            }
          }

        }
      }
    }
  }
}


</style>